<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,
        ul,
        li {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style-type: none
        }

        .rating {
            width: 300px;
            height: 47px;
        }

        .rating-item {
            float: left;
            width: 48px;
            height: 47px;
            background: url(img/rating.png) no-repeat 0 0px;
            /* 将多张图片合并到一起，可以降低网络开销 */
            cursor: pointer
        }
    </style>
</head>

<body>

    <ul class="rating" id="rating">

        <li class="rating-item" title="很不好"></li>
        <li class="rating-item" title="不好"></li>
        <li class="rating-item" title="一般"></li>
        <li class="rating-item" title="好"></li>
        <li class="rating-item" title="很好"></li>

    </ul>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script>
        var rating = (function () {
            // 点亮整颗
            var lightEntire = function (el, options) {
                // 将所有的需要的Jquery对象放在一个对象里，通过原型的方式个这个对象添加方法，处理元素
                // 将选择的结果进行存储，这里是决定复用的关键，如果初始化多个星星，就会通过这个构造函数建立多份实例
                this.$el = $(el);
                this.$item = this.$el.find(".rating-item");
                this.opts = options;
            }
            lightEntire.prototype.init = function () {
                this.lightOn(this.opts.num);
                this.bindEvent();
            };
            lightEntire.prototype.lightOn = function (num) {
                num = parseInt(num);
                this.$item.each(function (index) {
                    if (index < num) {
                        $(this).css('background-position', '0 -94px');
                    } else {
                        $(this).css("background-position", '0 0');
                    }
                })
            };
            lightEntire.prototype.bindEvent = function () {

                var itemLength = this.$item.length;
                var that = this;

                this.$el.on("mouseover", ".rating-item", function (event) {
                    var num = $(this).index() + 1;
                    that.lightOn(num);
                    // 1、做函数保护，同时使用call绑定this
                    (typeof that.opts.select === 'function') && that.opts.select.call(this, num,
                        itemLength);
                }).on("click", ".rating-item", function () {
                    that.lightOn($(this).index() + 1);
                    that.opts.num = $(this).index() + 1;
                    // 2、通过事件触发的方式来绑定回调
                    that.$el.trigger("trrigger_click", [that.opts.num, itemLength]);
                }).on("mouseout", ".rating-item", function () {
                    that.lightOn(that.opts.num);
                })
            }

            // 默认参数：建立了一套模板
            var defaults = {
                num: 0,
                readOnly: false,
                select: function () {},
                chosen: function () {},
            }

            // 初始化
            var init = function (el, options) {
                // 类似于object.assign
                var option = $.extend({}, defaults, options);
                new lightEntire(el, option).init();
            };

            $.fn.extend({
                rating: function (option) {
                    this.each(function () {
                        init(this, option);
                    })
                }
            })

            return {
                init: init
            }
        })();

/*         rating.init("#rating", {
            num: 2,
            select: function (index, length) {
                console.log('当前：' + index + '，一共：' + length);
            }
        }) */
        
        $("#rating").rating({
            num: 2,
            select: function (index, length) {
                console.log('当前：' + index + '，一共：' + length);
            }
        });

        // 2、通过事件触发的方式来绑定回调（第一个参数一定是事件参数）
        $("#rating").on("trrigger_click", function (e, num, total) {
            console.log('trrigger_click:当前：' + num + '，一共：' + total);
        })
    </script>

</body>

</html>